import React from "react";
import { Route } from 'react-router-dom';

import News from '../News';
import Index from '../Index';
import HouseList from '../HouseList';
import Profile from '../Profile';

import { TabBar } from 'antd-mobile';
// 导入组件自定义样式
import  './index.css';

const { Item } = TabBar;

// TabBar 数据
const tabItems =[
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home',
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list',
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news',
  },
  {
    title: '我的',
    icon: 'icon-ind',
    path: '/home/profile',
  }
];

export default class Home extends React.Component {
  state = {
    // 默认选中的菜单
    selectedTab: this.props.location.pathname,
  };

  componentDidUpdate(prevProps) {
    // console.log('上一次的路由信息', prevProps);
    // console.log('当前的路由信息', this.props);

    if (prevProps.location.pathname !== this.props.location.pathname) {
      // 此时 说明路由发送切换了
      this.setState({
        selectedTab: this.props.location.pathname
      })
    }
  }

  // 渲染TabBar.Item
  renderTabBarItem() {
    return tabItems.map(item => (
      <Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`} />}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path,
          });

          // 路页切换
          this.props.history.push(item.path);
        }}
      />
    ))
  }

  render () {
    return (
      <div className="home">
        {/* 子路由 */}
        <Route path="/home/news" component={News} />
        <Route exact path="/home" component={Index} />
        <Route path="/home/list" component={HouseList} />
        <Route path="/home/profile" component={Profile} />

        {/* TabBar */}
        <TabBar
          tintColor="#21B97A"
          noRenderContent={true}
          barTintColor="white"
        >
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    )
  }
}